<template>
  <div class="Safe">
    <Back title="安全中心"> </Back>
    <Bg>
      <div class="mybox">
        <div class="mydata-list">
          <div class="user-title">修改密码</div>
          <div class="rule-list-gt" @click="showPopup">
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="mydata-list">
          <div class="user-title">注销账号</div>
          <div class="rule-list-gt">
            <van-icon name="arrow" @click="showdiolog"/>
          </div>
        </div>
        <van-popup
          v-model="show"
          position="bottom"
          closeable
          :style="{ height: '50%' }"
        >
          <div class="changepwd">修改密码</div>
          <van-form @submit="updatePassword">
            <van-field
              v-model="oldpassword"
              :type="isShow ? 'text' : 'password' "
              name="密码"
              label="旧密码"
              placeholder="旧密码（首字符必须为字母）"
              :right-icon="isShow ? 'eye-o' : 'closed-eye'"
              @click-right-icon="showPassword"
              autocomplete="off"
              :rules="[
                {
                  required: true,
                  message: '必须以字母开头,6-16位字母数字下划线组合',
                  pattern: passwordReg,
                },
              ]"
            />
            <van-field
              v-model="newpassword"
              name="密码"
              label="新密码"
              placeholder="新密码（首字符必须为字母）"
              :right-icon="isShow ? 'eye-o' : 'closed-eye'"
              autocomplete="off"
              :rules="[
                {
                  required: true,
                  message: '必须以字母开头,6-16位字母数字下划线组合',
                  pattern: passwordReg,
                },
              ]"
            />
            <div class="login-btn">
              <van-button round block color="#0C34BA" native-type="submit" @click="updatePassword"
                >提交</van-button
              >
            </div>
          </van-form>

        </van-popup>
       <van-dialog v-model="dshow" title="注销账号" show-cancel-button confirmButtonColor="#0C34BA" @confirm="Logout">
        <div>是否确定注销账号，一旦注销无法恢复！</div>
       </van-dialog>
        <div class="Logout-btn">
              <van-button round block color="#0C34BA" native-type="submit" @click="Logout"
                >退出登录</van-button
              >
            </div>
      </div>
    </Bg>
  </div>
</template>

<script>
import Back from "../components/Back.vue";
import Bg from "../components/Bg.vue";

export default {
  name: "Safe",
  components: {
    Back,
    Bg,
  },

data() {
    return {
      show: false,
      dshow: false,
      isShow: false,
      //密码正则(必须以字母开头, 字母数字_组合[6-16])
      passwordReg: /^[A-Za-z]\w{5,15}$/,
      //昵称正则(中英文数字下划线组合[1-16])
      nickNameReg: /^[\u4e00-\u9fa5A-Za-z0-9_]{1,16}$/,
      //密码信息     
        newpassword: "",
        oldpassword: "",
    };
  },
  
  methods: {
    delectuser(){
          },
    showPopup() {
      this.show = true;
    },
    showdiolog(){
      this.dshow = true;

    },
    //显示密码
    showPassword() {
      this.isShow = !this.isShow;
    },
    // 修改密码接口
    updatePassword() {
   
     let data = {
       password:this.newpassword,
       oldPassword:this.oldpassword
      }
     
      this.axios({
        method: "post",
        url: "/updatePassword",
         data
      })
        .then((res) => {
           if( res.data.code===700){
          this.$router.push({name:"Login"})

           }
          this.$toast(res.data.msg);
        })
        .catch((err) => {
                  });
    },
    // 注销账号
       Logout () {
      this.axios({
        method: "POST",
        url: "/destroyAccount",
      })
        .then((res) => {
                    
          this.$toast(res.data.msg);
        })
        .catch((err) => {
                  });
    },
     // 退出登录
       Logout () {
      this.axios({
        method: "POST",
        url: "/logout",
      })
        .then((res) => {
                   
          this.$toast(res.data.msg);
          if(res.data.code==="F001"){
            this.$router.push({name:"Home"})
          }
        })
        .catch((err) => {
                  });
    },
   },
}
</script>

<style lang="less" scoped>
.van-dialog{
  font-size: 13px;
  text-align: center;
}
/deep/.van-dialog__header{
   font-size: 16px;
}
/deep/.van-dialog__content{
  padding: 10px 0 30px 0;
  color: #777;
}
.login-btn {
  width: 90%;
  margin: 50px auto;
}
.Logout-btn {
  margin: 130px auto;
}
.changepwd {
  padding: 16px;
  font-size: 15px;
  color: #777;
}
.mydata-list {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 8px 12px;
}
.user-title {
  font-size: 15px;
  color: #555;
  font-weight: bold;
}
.user-data {
  position: absolute;
  right: 10px;
  font-size: 14px;
  color: #777;
}
.user-data img {
  width: 50px;
  height: 50px;
  background-size: cover;
}
.rule-list-gt {
  position: absolute;
  right: 13px;
  font-size: 16px;
  color: #888;
}
</style>